<template>
  <section class="component outer-rank-list">
    <common-title title="委外方回款排行榜">
      <chart-query-form slot="append" v-model="outCaseModel"></chart-query-form>
    </common-title>

    <data-box :height="300" :data="outerDataSet" hiddenIndex>
      <template slot="columns">
        <el-table-column label="排名" width="50px">
          <template slot-scope="scope">
            <span>NO.{{(scope.$index+1)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="caseTotalAmount" label="案件总金额(元)" align="right" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="caseTotalNum" label="案件总数" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="casePaybackAmount" label="回款案件金额(元)" align="right" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="casePaybackNum" label="回款案件数" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="paybackRate" label="回款率" :min-width="$helper.getColumnWidth(3)">
          <template slot-scope="scope">
            <span>{{$filter.toPercent(scope.row.paybackRate)}}</span>
          </template>
        </el-table-column>
      </template>
    </data-box>

  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Layout, Dependencies } from "~/core/decorator";
import { VeHistogram } from "v-charts";
import DataBox from "~/components/common/data-box.vue";
import { HomePageService } from '~/services/domain-service/home-page.service';
import CommonTitle from "~/components/common/common-title.vue";
import ChartQueryForm from "~/components/dashboard/chart-query-form.vue";

@Component({
  components: {
    VeHistogram,
    DataBox,
    CommonTitle,
    ChartQueryForm
  }
})
export default class OuterRankList extends Vue {
  @Dependencies(HomePageService)
  private homePageService: HomePageService

  private outerDataSet: any[] = [];

  private outCaseModel = {
    dateDimension: 'WEEK',
    rankingType: 'PAYBACK_AMOUNT',
    overduePeriod: '',
    productName: '',
  };

  private updateData() {
  }

  private mounted() {
    this.updateData()
  }
}
</script>

<style lang="less" scoped>
</style>
